<script setup>
import { ref, onMounted, nextTick } from "vue";
import { useRouter } from "vue-router";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Navigation } from "swiper/modules";
import MaterialButton from "@/components/MaterialButton.vue";
import bg from "@/assets/img/home/tires/bg.png";
import selected from "@/assets/img/home/tires/selected.png";
import pin from "@/assets/img/home/tires/pin.png";
import "swiper/css";
import "swiper/css/navigation";
import { listPage } from "@/api/tires";
import tireImg from "@/assets/img/home/tires/defaultTire.png";
import bottom from "@/assets/img/products/badlands/bottom.png";

const modules = [Autoplay, Navigation];
const router = useRouter();
const props = defineProps({
    //   list: {
    //     type: Array,
    //     fileUrl: String,
    //   },
    navigation: {
        type: Boolean,
        default: true,
    },
});
const activeItem = ref({});
const go = (type) => {
    router.push(`/products?type=${type}`);
};
let list = ref([]);
let show = ref(false);
const activeName = ref("");

const mySwiper = ref();
listPage({ pageNum: 1, pageSize: 999 }).then((res) => {
    console.log(res);
    list.value = [];
    res.data.records.forEach((item) => {
        list.value.push({
            name: item.productName,
            value: item.id,
            image: item.productPic ? item.productPic.split(",")[0] : tireImg,
            tiresDesc: item.tiresDesc ? item.tiresDesc.split("==")[0] : "",
        });
    });

    show.value = true;
});
const onSlideChange = (swiper) => {
    nextTick(() => {
        const dom = document.getElementsByClassName("swiper-slide-active")[0].children[0].children[0];
        const activeIndex = dom.getAttribute("alt");
        activeItem.value = list.value[activeIndex];
        activeName.value = list.value[activeIndex].name;
    });
};
</script>
<template>
    <img :src="bg" alt="" />
    <div class="container">
        <div class="row pb-6" :style="`background: url(${bottom}) no-repeat bottom / contain;width:100%`">
            <div class="col-lg-6" style="display: flex; justify-content: flex-end">
                <img class="tire-box" :src="activeItem.image" alt="" style="height: 400px; margin-right: 30px" />
            </div>
            <div class="col-lg-6 ps-6">
                <h1 class="text-red text-f-ERASBD mt-5 ignore">{{ activeItem.name }}</h1>
                <div v-if="activeItem.tiresDesc" class="top-desc text-grey-1 mt-5 mb-5">{{ activeItem.tiresDesc }}...</div>
                <MaterialButton class="w-auto mt-6 bg-red" @click="router.push(`/detail?id=${activeItem.value}`)">LEARN MORE</MaterialButton>
            </div>
        </div>
    </div>

    <div v-if="show" class="swiperBox" style="position: relative">
        <div class="box-bg"></div>
        <swiper
            ref="mySwiper"
            :navigation="navigation"
            direction="horizontal"
            :loop="true"
            :autoplay="{
                disableOnIntercation: false,
                autoplay: false,
                delay: 2400,
            }"
            slidesPerView="auto"
            :spaceBetween="0"
            :centeredSlides="true"
            :modules="modules"
            @slideChange="onSlideChange"
        >
            <swiper-slide v-for="(item, key) in list" :key="item.value">
                <div class="swiper-img text-center">
                    <img :src="item.image" :alt="key" class="show-pointer" @click="router.push(`/detail?id=${activeItem.value}`)" />
                </div>

                <!-- <div class="detail row text-center mt-1">
                    <img :src="pin" alt="" style="height: 22px; object-fit: contain; margin-bottom: 1rem" />

                    <h4 class="" :style="{ display: 'block', color: 'red' }">
                        {{ item.name }}
                    </h4>
                    <div style="display: flex; justify-content: center">
                        <MaterialButton variant="gradient" color="danger" class="w-auto me-2 mt-3" style="" @click="router.push(`/pages/landing-pages/about-us?type=1`)">LEARN MORE</MaterialButton>
                    </div>
                </div> -->
            </swiper-slide>
        </swiper>
        <!-- <div class="box-bottom">
            <div class="detail row text-center">
                <img :src="pin" alt="" style="height: 22px; object-fit: contain; margin-bottom: 1rem" />

                <h4 class="" :style="{ display: 'block', color: 'red' }">
                    {{ activeName }}
                </h4>
                <div style="display: flex; justify-content: center; z-index: 3">
                    <MaterialButton class="bg-red" @click="router.push(`/detail?id=${activeItem.value}`)">LEARN MORE</MaterialButton>
                </div>
            </div>
        </div> -->
    </div>
</template>

<style scoped>
@media (min-width: 0px) {
    .swiper-slide {
        width: 80%;
        height: 40rem;
        /* transition: all 0.3s linear; */
        display: flex;
        flex-direction: column;
        opacity: 0.3;
        box-sizing: border-box;
    }

    .box-bottom {
        width: 80%;
        position: absolute;
        bottom: 0%;
        left: 10%;
    }
    .swiperBox {
        height: 550px;
    }
}
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    .swiper-slide {
        width: 19.2%;
        height: 40rem;
        /* transition: all 0.3s linear; */
        display: flex;
        flex-direction: column;
        opacity: 0.3;
        box-sizing: border-box;
    }
    .swiperBox {
        height: 660px;
        padding: 4rem 6rem 0rem 6rem;
    }
    .box-bg {
        width: 16%;
        height: 72%;
        background-image: linear-gradient(to bottom, #fff, #ff0a0a08, #ff0a0a);
        border-radius: 0 0 200px 200px;
        position: absolute;
        top: 0;
        left: 42%;
    }
    .box-bottom {
        width: 20%;
        position: absolute;
        bottom: 20%;
        left: 40%;
    }
}

.swiper-img {
    width: 100%;
    height: calc(100% - 14rem);
    padding: 4rem 0.5rem 1rem 0.5rem;
}
.swiper-img img {
    width: 60%;
    height: calc(100% - 5rem);
    object-fit: contain;
}

.swiper-slide-active,
.swiper-slide-duplicate-active {
    transition: all 0.3s linear;
    transform: scale(1.3);
    margin-top: 2rem;
    opacity: 1;
}

/* .swiper-slide-active .swiper-img {
 
} */
.swiper-slide .detail {
    display: none;
}
.swiper-slide-active .detail {
    display: block;
}
@media (max-width: 991.98px) {
    .tire-box {
        display: none;
    }
    .swiperBox {
        padding: 0 2.5rem;
    }
    .top-desc {
        display: none;
    }
}
@media (min-width: 991.99px) {
    .tire-box {
        display: block;
    }
}
</style>
<style>
.swiper-button-prev,
.swiper-button-next {
    color: rgba(0, 0, 0, 0);
    position: absolute;
    top: 12rem;
}
.swiper-button-prev {
    background: url("@/assets/img/home/tires/left.png") no-repeat top / cover;

    left: 0;
}
.swiper-button-next {
    background: url("@/assets/img/home/tires/right.png") no-repeat top / cover;

    right: 0;
}

.swiper-slide-prev .detail {
    display: none;
}

.swiper-slide-next .detail {
    display: none;
}
@media (max-width: 991.98px) {
    .swiper-button-prev,
    .swiper-button-next {
        width: 22px;
        height: 40px;
    }
}
@media (min-width: 991.99px) {
    .swiper-button-prev,
    .swiper-button-next {
        width: 42px;
        height: 60px;
    }
}
</style>
